<template>
  <el-row>
    <el-slider
        :max="365"
        @change="sliderChange"
        @input="sliderInput"
        style="padding-left: 2vw;padding-right: 2vw"
        v-model="value"
        :format-tooltip="formatTooltip"
    ></el-slider>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      //  ----------- 查询表单 --------------
      value: 0,
      //  ------------ 查询项相关 ----------------
      categoryOption: [
        {
          value: 0,
          label: "全部"
        }, {
          value: 1,
          label: "未知"
        },
        {
          value: 2,
          label: "假药"
        }, {
          value: 3,
          label: "虚假信息"
        },
        {
          value: 4,
          label: "政治反动"
        }, {
          value: 5,
          label: "恐怖主义"
        },
        {
          value: 6,
          label: "淫秽色情"
        }
      ],
      mobileOption: [
        {value: 0, label: "全部"},
      ],
    }
  },
  props: {
    Reset: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    Reset: function () {
      this.value = -1
      // this.resettingSelectOption()
    }
  },
  methods: {
    // -------------- 查询功能 --------------

    /**
     * 滑块值发生变化
     */
    sliderChange: function () {
      this.$emit("sliderChange", this.value)
    },

    /**
     * 滑块值发生实时变化
     * */
    sliderInput: function () {
      this.$emit("sliderInput", this.value)
    },
    //  --------- 其他功能 -----------

    /**
     * 滑块悬浮格式
     * @param val
     * @returns {string}
     */
    formatTooltip: function (val) {
      return `${val}天`
    }
  }
}
</script>

<style>

.el-form {
  text-align: left;
}

.el-form-item {
  margin-left: 1.5vw;
}
</style>